<template>
  <div class="box">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span style="margin-left: -10px">企业认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组34.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>

    <div class="f2">
      <ul class="ul">
        <li>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="企业纳税人状态" prop="a">
              <el-select @change="a" v-model="form.a" placeholder="">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="正常" value="1"></el-option>
                <el-option key="2" label="非正常" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="" prop="b">
              <p
                style="
                  position: absolute;
                  left: -177px;
                  top: -9px;
                  font-size: 14px;
                "
              >
                <span style="color: #f56c6c">*</span>
                最近12个月海关进口税费
              </p>
              <el-input
                v-model="addform.b"
                @focus="
                  () => {
                    this.addform.b = remoney(this.addform.b);
                  }
                "
                @input="limitInput($event, 'b')"
                placeholder=" "
                @blur="b"
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 15px;
                  top: 5px;
                  z-index: 999;
                  font-size: 16px;
                "
              >
                元
              </p>
              <p class="message" v-if="b1">格式错误，请重新输入</p>
              <p
                style="
                  position: absolute;
                  left: -167px;
                  top: 12px;
                  font-size: 14px;
                "
              >
                支付金额
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="企业纳税信用等级" prop="c">
              <el-select @change="c" v-model="form.c" placeholder="">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option key="1" label="A" value="A"></el-option>
                <el-option key="2" label="B" value="B"></el-option>
                <el-option key="3" label="C" value="C"></el-option>
                <el-option key="4" label="D" value="D"></el-option>
                <el-option key="5" label="M" value="M"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="" prop="d">
              <p
                style="
                  position: absolute;
                  left: -177px;
                  top: -9px;
                  font-size: 14px;
                "
              >
                <span style="color: #f56c6c">*</span>
                最近12个月单月最高海关
              </p>
              <el-input
                v-model="addform.d"
                @focus="
                  () => {
                    this.addform.d = remoney(this.addform.d);
                  }
                "
                @input="limitInput($event, 'd')"
                placeholder=" "
                @blur="d"
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 15px;
                  top: 5px;
                  z-index: 999;
                  font-size: 16px;
                "
              >
                元
              </p>
              <p class="message" v-if="d1">格式错误，请重新输入</p>
              <p
                style="
                  position: absolute;
                  left: -167px;
                  top: 12px;
                  font-size: 14px;
                "
              >
                进口税费支付金额
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="企业海关信用等级" prop="e">
              <el-select @change="e" v-model="form.e" placeholder="">
                <el-option key="99" label="请选择" value=""></el-option>
                <el-option
                  key="1"
                  label="高级认证企业"
                  value="高级认证企业"
                ></el-option>
                <el-option
                  key="2"
                  label="注册登记和备案企业"
                  value="注册登记和备案企业"
                ></el-option>
                <el-option
                  key="3"
                  label="失信企业"
                  value="失信企业"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="当期财报年份" prop="f">
              <el-date-picker
                :clearable="false"
                v-model="form.f"
                @change="f"
                type="year"
                placeholder=""
                value-format="YYYY"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="企业欠缴关税记录数" prop="g">
              <el-input v-model="form.g" placeholder="" @blur="g"></el-input>
              <p class="message" v-if="g1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="企业当期年度利润总额" prop="h">
              <el-input
                v-model="addform.h"
                @focus="
                  () => {
                    this.addform.h = remoney(this.addform.h);
                  }
                "
                placeholder=""
                @blur="h"
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 15px;
                  top: 5px;
                  z-index: 999;
                  font-size: 16px;
                "
              >
                元
              </p>
              <p class="message" v-if="h1">格式错误，请重新输入</p>
              <!--                 @input="limitInput($event, 'h')" -->
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="企业上年度进口纳税金额" prop="i">
              <el-input
                v-model="addform.i"
                @focus="
                  () => {
                    this.addform.i = remoney(this.addform.i);
                  }
                "
                @input="limitInput($event, 'i')"
                placeholder=""
                @blur="i"
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 15px;
                  top: 5px;
                  z-index: 999;
                  font-size: 16px;
                "
              >
                元
              </p>
              <p class="message" v-if="i1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>

          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label="企业上期年度利润总额" prop="j">
              <el-input
                v-model="addform.j"
                @focus="
                  () => {
                    this.addform.j = remoney(this.addform.j);
                  }
                "
                placeholder=""
                @blur="j"
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 15px;
                  top: 5px;
                  z-index: 999;
                  font-size: 16px;
                "
              >
                元
              </p>
              <!--       @input="limitInput($event, 'j')" -->
              <p class="message" v-if="j1">格式错误，请重新输入</p>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="submitBtn()"
          v-if="radio"
          src="@/assets/PC/金融服务/组38.png"
          alt=""
        />
        <img
          @click="submitBtn()"
          v-else
          src="@/assets/PC/金融服务/组39.png"
          alt=""
        />
        <span> 阅读并同意 </span>
        <a @click="submitBtn()">《企业授权协议》</a>
        <!-- <a href="javascript:void(0)">《技术服务协议》</a> -->
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <button
          class="btn btn3"
          v-bind:class="{
            active: btn & radio,
            actives: submitMessage == '提交中',
          }"
          @click="addKJApplys()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      v-model="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <template v-if="list">
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="item in list"
              :key="item.url"
              :label="item.name"
              :name="item.names"
            >
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <!-- <div slot="footer" class="dialog-footer">
        <button :disabled="isLock" class="dialog-footer-bnt btn2" @click="sign">
          去签署
        </button>
      </div> -->
      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <button
            v-if="contractStatuss"
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="aaaa"
          >
            确定
          </button>
          <button
            v-else
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="sign"
          >
            去签署
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      style="padding: 0px"
      class="hint"
      :closeOnClickModal="false"
      title=""
      v-model="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>签署短信已发送至经办人手机{{ getPhone(operatetel) }}、</p>
        <p>法定代表人手机{{ getPhone(officertel) }}，</p>
        <p>请点击短信签署链接完成签署操作。</p>
      </div>
      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <button class="dialog-footer-bnt btn2" @click="aaaa">确定</button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  addKJApplys,
  Contract,
  Contracts,
  createContractReview,
  updateapplyid,
  myPostFetch,
} from "@/utils";
import { desensitization } from "@/utils/filters.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      submitMessage: "提交",
      isLock: false,
      QYSQreportUrl: "",
      JSFWreportUrl: "",
      activeName: "first", //标签页默认
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      disabled: false,
      officertel: "13555555555", //法人手机号
      operatetel: "13555555555", //经办人手机号
      loading: true,

      list: null,
      radio: false, //企业授权服务状态变量
      btn: false, //提交按钮是否可用状态变量
      procedureId: "", // 从路由地址中获取产品ID,保存到状态变量中
      flowId: "",
      productcode: null,
      gsbh: [],
      index: "",
      apply: null,
      b1: false,
      d1: false,
      g1: false,
      h1: false,
      i1: false,
      j1: false,
      form: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
        g: "",
        h: "",
        i: "",
        j: "",
      },
      // 用户填写资料表格
      addform: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
        g: "",
        h: "",
        i: "",
        j: "",
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: " ", trigger: "blur" }],
        d: [{ required: true, message: " ", trigger: "blur" }],
        e: [{ required: true, message: " ", trigger: "blur" }],
        f: [{ required: true, message: " ", trigger: "blur" }],
        g: [{ required: true, message: " ", trigger: "blur" }],
        h: [{ required: true, message: " ", trigger: "blur" }],
        i: [{ required: true, message: " ", trigger: "blur" }],
        j: [{ required: true, message: " ", trigger: "blur" }],
      },
      // 合同签署数据
      contract: {
        applyid: "",
        entname: "",
        FRaccountid: "",
        inputdate: "",
        JBRaccountid: "",
        licenseno: "",
        mainindname: "",
        officer: "",
        officertel: "",
        ORGaccountid: "",
        productcode: "",
        radio: "",
        ticketadder: "",
        ticketbank: "",
        ticketbankno: "",
        tickethead: "",
        ticketno: "",
        tickettel: "",
        signday: "",
        step: "preapply",
      },
      contractStatuss: true,
    };
  },
  // 生命周期方法
  mounted() {
    // 从路由地址中获取产品ID,保存到状态变量中
    this.procedureId = localStorage.getItem("productcodeId");
    this.productcode = localStorage.getItem("productcode");
    this.contract.productcode = localStorage.getItem("productcode");
    this.selectkj();
    // this.gsbh = JSON.parse(sessionStorage.getItem("chen"));
    this.getTime();
  },

  methods: {
    //手机号脱敏
    getPhone(value) {
      return desensitization(value);
    },
    // 获取当前时间
    getTime() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds(); //秒
      var weekArr = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      this.contract.signday =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds;
    },
    async selectkj() {
      let url = "/api/hubeibusienss/findproductfile";
      let params = {
        productcode: this.productcode,
      };
      let data = await myPostFetch(url, params);
      this.gsbh = data.data.productSub;
      this.gsbh.show05 = data.data.filepath;
    },
    // 点击去签署按钮
    async sign() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 4000);
      this.loading = true;
      let data = await Contract(this.contract);
      if (data.code == 100) {
        this.loading = false;
        this.radio = true;
        this.submitBtns();
        this.showAgreementVisible = false;
        this.hintVisible = true;
        this.flowId = data.data.flowId;
      }
    },
    // 签署协议提示确认键
    aaaa() {
      this.radio = true;
      this.showAgreementVisible = false;
      this.submitBtns();
      this.hintVisible = false;
    },
    // 点击勾选协议按钮
    async submitBtn() {
      if (
        this.form.a == "" ||
        this.form.b == "" ||
        this.form.c == "" ||
        this.form.d == "" ||
        this.form.e == "" ||
        this.form.f == "" ||
        this.form.g == "" ||
        this.form.h == "" ||
        this.form.i == "" ||
        this.form.j == ""
      )
        return ElMessage.error("请输入内容");
      if (this.radio) this.radio = !this.radio;
      this.loading = true;
      this.showAgreementVisible = true;
      let productcode = this.contract.productcode;
      let parameter = {
        productcode: productcode,
        acceptor: localStorage.getItem("entname"),
      };
      let data = await Contracts(parameter);
      if (data.code != 100) {
        this.showAgreementVisible = false;
        ElMessage.error("产品编号未进行模板配置，请联系管理员进行配置");
        this.loading = false;
        return;
      }
      this.officertel = data.data.ent.fincerttel;
      this.operatetel = data.data.ent.operateTel;
      this.contract.entname = data.data.ent.entname;
      this.contract.FRaccountid = data.data.ent.fraccountid;
      this.contract.inputdate = data.data.ent.inputdate;
      this.contract.JBRaccountid = data.data.ent.jbRaccountid;
      this.contract.licenseno = data.data.ent.licenseno;
      this.contract.mainindname = data.data.ent.mainindname;
      this.contract.officer = data.data.ent.operatename;
      this.contract.officertel = data.data.ent.fincerttel;
      this.contract.ORGaccountid = data.data.ent.qyaccountid;
      data.data.coopeorg
        ? (this.contract.ticketbank = data.data.coopeorg.ticketbank)
        : (this.contract.ticketbank = "");
      data.data.coopeorg
        ? (this.contract.ticketbankno = data.data.coopeorg.ticketaccountno)
        : (this.contract.ticketbankno = "");
      data.data.coopeorg
        ? (this.contract.tickettel = data.data.coopeorg.tickettel)
        : (this.contract.tickettel = "");
      this.contract.radio = data.data.radio;

      let GetcreateContractReview = await createContractReview(this.contract);
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss;
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data;
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == "企业授权协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "first";
              this.activeName = "first";
            } else if (this.list[i].name == "技术服务协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "second";
              this.activeName = "second";
            }
          }
          this.loading = false;
        } else {
          this.list = GetcreateContractReview.data.data.file;
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == "企业授权协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "first";
              this.activeName = "first";
            } else if (this.list[i].name == "技术服务协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "second";
              this.activeName = "second";
            }
          }
          this.loading = false;
        }
      } else {
        this.showAgreementVisible = false;
        ElMessage.error("产品编号未进行模板配置，请联系管理员进行配置");
      }
      this.submitBtns();
    },
    submitBtns() {
      if (
        this.form.a != "" &&
        this.form.b != "" &&
        this.form.c != "" &&
        this.form.d != "" &&
        this.form.e != "" &&
        this.form.f != "" &&
        this.form.g != "" &&
        this.form.h != "" &&
        this.form.i != "" &&
        this.form.j != "" &&
        this.radio
      ) {
        this.btn = true;
      } else {
        this.btn = false;
      }
    },

    // 产品申请第1步
    async addKJApplys() {
      if (this.submitMessage == "提交中") return;
      if (!this.btn) return;
      if (
        this.btn &&
        this.radio &&
        this.form.a != "" &&
        this.form.b != "" &&
        this.form.c != "" &&
        this.form.d != "" &&
        this.form.e != "" &&
        this.form.f != "" &&
        this.form.g != "" &&
        this.form.h != "" &&
        this.form.i != "" &&
        this.form.j != ""
      ) {
        this.submitMessage = "提交中";
        let form = {
          taxpayerstatus: this.form.a,
          customsamount: this.form.b,
          creditrating: this.form.c,
          highestamount: this.form.d,
          customs: this.form.e,
          particularyear: this.form.f,
          enttariff: this.form.g,
          currentprofit: this.form.h,
          paytaxesmoner: this.form.i,
          periodprofit: this.form.j,
          productname: this.gsbh.productname,
          productid: this.procedureId,
          productcood: this.productcode,
        };
        let data = await addKJApplys(form);
        if (data.msg == "ok") {
          if (!this.contractStatuss) {
            await updateapplyid(data.data.applyid, this.flowId);
          }
          ElMessage.success("申请提交成功");
          this.$router.push("/gsbhysxApply2");
          this.submitMessage = "提交";
        } else {
          ElMessage.error("申请提交失败，请检查数据");
          this.submitMessage = "提交";
        }
      } else {
        ElMessage.error("请输入内容");
      }
    },
    // 表单
    a() {
      this.submitBtns();
    },
    b(e) {
      this.b1 = false;
      this.form.b = this.addform.b;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.b = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.addform.b = this.fmoney(this.addform.b);

      let value = Number(this.form.b);
      this.submitBtns();
      if (this.form.b == "") return;
      this.form.b = value.toFixed(2);
      if (isNaN(this.form.b)) {
        this.form.b = "";
        this.b1 = true;
      }
    },
    c() {
      this.submitBtns();
    },
    d(e) {
      this.d1 = false;
      this.form.d = this.addform.d;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.d = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.addform.d = this.fmoney(this.addform.d);

      let value = Number(this.form.d);
      this.submitBtns();
      if (this.form.d == "") return;
      this.form.d = value.toFixed(2);
      if (isNaN(this.form.d)) {
        this.form.d = "";
        this.d1 = true;
      }
    },
    e() {
      this.submitBtns();
    },
    f() {
      this.submitBtns();
    },
    g() {
      this.g1 = false;
      let value = Number(this.form.g);
      this.submitBtns();
      if (this.form.g == "") return;
      this.form.g = value.toFixed(0);
      if (isNaN(this.form.g)) {
        this.form.g = "";
        this.g1 = true;
      }
    },
    h(e) {
      this.h1 = false;
      this.form.h = this.addform.h;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.h = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.addform.h = this.fmoney(this.addform.h);
      let value = Number(this.form.h);
      this.submitBtns();
      if (this.addform.h == "") return;
      this.form.h = value.toFixed(2);
      if (isNaN(this.form.h)) {
        this.addform.h = "";
        this.h1 = true;
      }
    },
    i(e) {
      this.i1 = false;
      this.form.i = this.addform.i;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.i = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.addform.i = this.fmoney(this.addform.i);

      let value = Number(this.form.i);
      this.submitBtns();
      if (this.form.i == "") return;
      this.form.i = value.toFixed(2);
      if (isNaN(this.form.i)) {
        this.form.i = "";
        this.i1 = true;
      }
    },
    j(e) {
      this.j1 = false;
      this.form.j = this.addform.j;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.j = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.addform.j = this.fmoney(this.addform.j);
      let value = Number(this.form.j);
      this.submitBtns();
      if (this.addform.j == "") return;
      this.form.j = value.toFixed(2);
      if (isNaN(this.form.j)) {
        this.addform.j = "";
        this.j1 = true;
      }
    },
    // 表单格式转换
    // 票面金额
    limitInput(value, name) {
      this.addform[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == "" || s == null || (s == undefined) | isNaN(Number(s))) {
        return s;
      }
      s = Number(s) ? Number(s) : s;
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s.split(".")[0].split("").reverse();
      var r = s.split(".")[1];
      var t = "";
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      if (n > 0) {
        r = "." + r;
      } else if (n == 0) {
        r = "";
      }
      let returnT = t.split("").reverse().join("") + r;
      //负数处理
      if (returnT[0] == "-" && returnT[1] == ",") {
        returnT = "-" + returnT.substring(2);
      }
      return returnT;
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = "";
      if (s) {
        str = String(s).replace(/,/g, "");
      }
      if (s && (s + "").indexOf(".") > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, "");
      } else if (s && Number(str)) {
        return str;
      } else {
        return s;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          display: flex;
          align-items: center;
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 250px;
            height: 3px;
            background-color: #dbdbdb;
            margin: 0 8px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .unit {
    position: relative;
    width: 90%;
    height: 20px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 14px;
    color: #606266;
    p {
      position: absolute;
      @media only screen and (min-width: 1580px) and (max-width: 1950px) {
        right: 15.1%;
      }
      right: 5.5%;
      top: -3px;
    }
  }
  .f2 {
    // height: 240px;
    overflow: auto;
    // background-color: #f00;
    // @media only screen and (min-width: 1580px) and (max-width: 1950px) {
    //   height: 390px;
    // }
    margin-top: 5%;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;

      li {
        position: relative;
        width: 95%;
        margin-bottom: 18px;
        height: 50px;
        display: flex;
        // justify-content: center;
        .message {
          position: absolute;
          top: 35px;
          font-size: 12px;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
  }
  .f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }
  .f3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 55px;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      bottom: 70px;
    }
    width: 275px;
    height: 34px;
    background: #0a7be0;
    border-radius: 4px;
    font-size: 18px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25px;
    text-align: center;
    margin-top: 10px;
    user-select: none;
    span {
      font-size: 14px;
      color: #666;
      margin-left: 7px;
    }
    img {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    a {
      font-size: 14px;
      color: #0a7be0;
    }
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: 5px 0 5px 0;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 34px;
      background: #0a7be0;
      border-radius: 4px;
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 300;
      color: #ffffff;
      margin-right: 30px;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #0a7be0;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
  // 弹出框
  .dialog-center {
    box-sizing: border-box;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    width: 100%;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 520px;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 520px;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 660px;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 600px;
        height: 460px;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 600px;
        height: 460px;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 760px;
        height: 580px;
      }

      background-color: #fff;

      h1 {
        font-size: 18px;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #0a7be0;
      border: 1px solid #0a7be0;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
    flex-wrap: wrap;
    p {
      margin-bottom: 15px;
    }
  }
}
::v-deep(.el-dialog__body) {
  padding: 0px;
}
::v-deep(.hint .el-dialog) {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 56%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 49%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 40%;
    // background-color: #f00;
  }
}
// 协议
::v-deep(.inviteAffirmClient .el-dialog) {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
::v-deep(.el-dialog__header) {
  border: 0;
  padding: 5px 20px;
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 280px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep(.el-input__prefix) {
  position: absolute;
  right: 7px;
}
::v-deep(.el-input__wrapper) {
  width: 280px;
  height: 39px;
}
</style>
<style lang="scss"></style>
